<template>
  <div class="news-wrap">
    <el-button v-if="!showEdit" type="primary" size="mini" @click="openAddNews">
      添加新闻 </el-button><br><br>
    <el-table v-show="!showEdit" :data="tableData" border>
      <el-table-column label="新闻标题" prop="newsTitle" />
      <el-table-column label="发布时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="goToEdit(scope.row)">
            编辑内容
          </el-button>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不了"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这个新闻吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              size="mini"
              style="margin-left:10px"
              type="danger"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="showEdit">
      <el-form>
        <el-form-item label="新闻封面" label-width="80px">
          <div class="img-box">
            <el-image
              :src="model.news"
              style="width: 100px; height: 100px"
              fit="cover"
            />
            <simpleCropper :ratio="1" :img.sync="model.news">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              >点击上传</el-button>
            </simpleCropper>
          </div>
        </el-form-item>
        <el-form-item label="新闻标题" label-width="80px">
          <el-input v-model="model.newsTitle" size="mini" />
        </el-form-item>
        <el-form-item>
          <vue-editor v-model="model.newsContext" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showEdit = false">返 回</el-button>
        <el-button
          v-if="!editing"
          size="mini"
          type="primary"
          @click="confirm(1)"
        >确 定</el-button>
        <el-button
          v-else
          size="mini"
          type="primary"
          @click="confirm(2)"
        >保 存</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import simpleCropper from '@/components/SimpleCropper'
import VueEditor from '@/components/VueEditor'
export default {
  components: {
    simpleCropper,
    VueEditor
  },
  props: {
    id: {
      type: Number,
      default: Number
    }
  },
  data() {
    return {
      showEdit: false,
      // 编辑还是修改
      editing: false,
      model: {
        newsContext: '',
        newsTitle: '',
        news: ''
      },
      tableData: []
    }
  },
  watch: {
    id() {
      this.fetch()
    }
  },
  mounted() {
    console.log(this.id)
    this.fetch()
  },
  methods: {
    async fetch() {
      const { data } = await this.$http.getNewsByArea({ saiquId: this.id })
      this.tableData = data.list
    },
    async handleDelete(id) {
      await this.$http.deleteNewsList({ id })
      this.$message.success('删除成功')
      this.fetch()
    },
    goToEdit(row) {
      this.editing = true
      this.model = row
      this.showEdit = true
    },
    async confirm(type) {
      this.model.saiquId = this.id
      // 135为赛区们的新闻
      this.model.type = 135
      if (type === 1) {
        await this.$http.addNewsList(this.model)
        this.$message.success('添加新闻成功')
      } else {
        await this.$http.setNewsList(this.model)
        this.$message.success('修改成功')
      }
      this.fetch()
      this.showEdit = false
    },
    // 添加新闻
    openAddNews() {
      this.editing = false
      this.showEdit = true
      this.model = {
        newsContext: '',
        newsTitle: '',
        news: ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 5vh !important;
}
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
</style>
